<template>
  <div class="pagination">
    <el-pagination   layout="total, sizes, prev, pager, next, jumper" :current-page="page" :page-size="pageSize"
      :page-sizes="[10, 50, 100]" :total="total" @current-change="
        (page) => {
          $emit('pageChange', page);
        }
      " @size-change="(limit)=>{
        $emit('handleSizeChange', limit);
      }">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "pagination",
  props: {
    page: {
      default: 1,
    },
    pageSize: {
      default: 10,
    },
    total: {
      default: 0,
    },
  },
};
</script>

<style scoped>
.pagination {
  display: flex;
  flex-direction: row-reverse;
  height: 60px;
  align-items: center;
}
</style>